import React, { PureComponent } from 'react'
import { bindActionCreators } from "redux"
import { connect } from 'react-redux'
import { actions, getBanner } from '../../store/modules/mine'
import { actions as loginActions } from '../../store/modules/login'
import Top from '../../components/Top/Top'
class Mine extends PureComponent {
    componentDidMount() {
        let { mine: { reqBanner } } = this.props
        reqBanner()
    }
    render() {
        let title = "Mine"
        let { banner, login:{changeInfo},history} = this.props
        console.log(this.props);
        return (
            <div>
                <Top title={title}></Top>
                {
                    banner.map((item) => (
                        <div key={item.id}>
                            <img src={item.img} alt="" />
                            <div>{item.title}</div>
                        </div>

                    ))
                }
                <button onClick={()=>changeInfo({},history)}>退出登录</button>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    banner: getBanner(state),
})

const mapDispatchToProps = dispatch => ({
    mine: bindActionCreators(actions, dispatch),
    login: bindActionCreators(loginActions, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(Mine)